<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>修改产品信息</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
        <link rel="stylesheet" th:href="${urls.getForLookupPath('/css/font.css')}">
        <link rel="stylesheet" th:href="${urls.getForLookupPath('/css/xadmin.css')}">
        <script th:src="${urls.getForLookupPath('/lib/layui/layui.js')}" charset="utf-8"></script>
        <script type="text/javascript" th:src="${urls.getForLookupPath('/js/xadmin.js')}"></script>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <div>
                        <input type="text" hidden th:value="${editProduct.id}" th:name="id">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>产品名称</label>
                        <div class="layui-input-inline">
                            <input th:value="${editProduct.name}" type="text" id="productName" name="productName"
                                   required="" lay-verify="productName"
                                   autocomplete="off" placeholder="请输入产品名称" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux">
                            <span class="x-red">*</span>产品名称可能相同（规格不同）
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>产品规格</label>
                        <div class="layui-input-inline">
                            <input th:value="${editProduct.specification}" type="text" id="specification"
                                   name="specification"
                                   required="" lay-verify="specification"
                                   autocomplete="off" placeholder="请输入产品规格" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <span class="x-red">*</span>请尽可能详细
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>参考价格</label>
                        <div class="layui-input-inline">
                            <input th:value="${editProduct.price}" type="text" id="price" name="price" required=""
                                   lay-verify="price"
                                   autocomplete="off" placeholder="请输入参考价格" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux">
                            <span class="x-red">*</span>可以是小数
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>数量上限</label>
                        <div class="layui-input-inline">
                            <input th:value="${editProduct.upper}" type="text" id="upper" name="upper" required=""
                                   lay-verify="upper"
                                   autocomplete="off" placeholder="请输入数量上限" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux">
                            <span class="x-red">*</span>必须是整数
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>数量下限</label>
                        <div class="layui-input-inline">
                            <input th:value="${editProduct.lower}" type="text" id="lower" name="lower" required=""
                                   lay-verify="lower"
                                   autocomplete="off" placeholder="请输入数量下限" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux">
                            <span class="x-red">*</span>必须是整数
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button lay-filter="edit" lay-submit="" class="layui-btn layui-btn-fluid">确认修改</button>
                    </div>
                </form>
            </div>
        </div>
        <script>layui.use(['form', 'layer'],
            function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer, SendData;

                //自定义验证规则
                form.verify({
                    productName: function (value) {
                        if (value.length === 0) {
                            return '产品名称不能为空啊';
                        }else if(value.length > 10){
                            return '产品名称长度不能超过10';
                        }
                    },
                    specification: function (value) {
                        if (value.length < 2) {
                            return '产品规格要详细点啊';
                        }else if(value.length > 100){
                            return '产品规格请简单点!';
                        }
                    },
                    price: function (value) {
                        if (value == 0) {
                            return '产品不能白卖啊';
                        }
                    },
                    upper: function (value) {
                        if (value % 1 !== 0) {
                            return '数量上限为整数且不能为空';
                        }
                    },
                    lower: function (value) {
                        if (value % 1 !== 0) {
                            return '数量下限为整数且不能为空';
                        }
                        if (value > $('#upper').val()){
                            return '数量下限应不大于数量上限';
                        }
                    }
                });

                //监听提交
                form.on('submit(edit)', function (data) {
                    console.log(data);

                    SendData = $.ajax({
                        type: "POST",
                        url: "/usermanage/updateProduct",
                        data: {
                            id: data.field.id,
                            name: data.field.productName,
                            specification: data.field.specification,
                            price: data.field.price,
                            upper: data.field.upper,
                            lower: data.field.lower,
                        },

                        success: function () {
                            layer.alert('修改成功！', {
                                    icon: 6
                                },
                                function () {
                                    xadmin.father_reload();     // 对父窗口进行刷新
                                    xadmin.close();         // 关闭当前 frame
                                });
                        },

                        error: function () {
                            layer.alert('修改失败！', {icon: 5});
                        }
                    });
                    // 等待 ajax 执行完毕
                    $.when(SendData).done(function (value) {

                    });
                    return false;
                });

            });
        </script>
    </body>

</html>